<template>
  <div class="addDialog">
    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑企业' : '添加企业'" width="500">
      <div class="form">
        <el-form ref="formRef" :rules="rules" :model="form" label-width="auto">
          <el-form-item label="企业名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入企业名称"></el-input>
          </el-form-item>
          <el-form-item label="工商注册号" prop="registrationNo">
            <el-input v-model="form.registrationNo" placeholder="请输入工商注册号"></el-input>
          </el-form-item>
          <el-form-item label="法定代表人" prop="legalRepresentative">
            <el-input v-model="form.legalRepresentative" placeholder="请输入法定代表人"></el-input>
          </el-form-item>
          <el-form-item label="注册资金" prop="registeredCapital">
            <el-input-number
              v-model="form.registeredCapital"
              :min="0"
              :step="1"
              placeholder="请输入注册资金"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="注册时间" prop="establishTime">
            <el-date-picker
              v-model="form.establishTime"
              :locale="zhCn"
              type="date"
              placeholder="请选择注册时间"
              style="width: 80%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="注册地址" prop="registeredAddress">
            <el-input v-model="form.registeredAddress" placeholder="请输入注册地址"></el-input>
          </el-form-item>
          <el-form-item label="经营状态" prop="operationStatus">
            <el-select
              style="width: 80%"
              v-model="form.operationStatus"
              placeholder="请选择经营状态"
            >
              <el-option
                v-for="status in operationStatusOptions"
                :key="status.value"
                :label="status.label"
                :value="status.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog()">取消</el-button>
          <el-button type="primary" @click="submitForm()">
            {{ isEdit ? '更新' : '创建' }}</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, defineExpose, reactive } from 'vue'
import { createEnterprise, updateEnterprise } from '@/api/enterprise'
import { ElMessage } from 'element-plus'

const dialogVisible = ref(false)
const isEdit = ref(false) // 是否为编辑模式
const formRef = ref(null)
const form = reactive({
  name: '',
  registrationNo: '',
  legalRepresentative: '',
  registeredCapital: 0,
  registeredAddress: '',
  operationStatus: '',
  establishTime: '',
})
const operationStatusOptions = ref([
  { label: '正常', value: '正常' },
  { label: '存续', value: '存续' },
  { label: '吊销', value: '吊销' },
  { label: '注销', value: '注销' },
  { label: '停业', value: '停业' },
  { label: '清算中', value: '清算中' },
])
const rules = reactive({
  name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
  registrationNo: [{ required: true, message: '请输入工商注册号', trigger: 'blur' }],
  legalRepresentative: [{ required: true, message: '请输入法人姓名', trigger: 'blur' }],
  registeredAddress: [{ required: true, message: '请输入注册地址', trigger: 'blur' }],
  operationStatus: [{ required: true, message: '请输入经营状态', trigger: 'blur' }],
})
// 打开弹窗方法
const openDialog = (data = null) => {
  if (data) {
    console.log(data)

    isEdit.value = true
    Object.assign(form, data)
  } else {
    isEdit.value = false
  }
  dialogVisible.value = true
}

// 关闭弹窗方法
const closeDialog = () => {
  dialogVisible.value = false
  formRef.value.resetFields()
}

const emit = defineEmits(['submit'])
const submitForm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      let res
      if (isEdit.value) {
        // 编辑企业
        res = await updateEnterprise({ ...form })
      } else {
        // 创建企业
        res = await createEnterprise({ ...form })
      }
      if (res.status === 200 || res.status === 201) {
        ElMessage.success(isEdit.value ? '编辑成功' : '添加成功')
        closeDialog()
        formRef.value.resetFields()
        emit('submit')
      } else {
        ElMessage.error(res.data.data || '系统繁忙，请稍后再试')
      }
    } else {
      console.log('表单验证失败')
    }
  })
}

// 让父组件能调用 openDialog 和 closeDialog
defineExpose({ openDialog, closeDialog })
</script>

<style lang="scss" scoped>
.addDialog {
  position: relative;
  .form {
    padding: 0 30px;
  }
  .el-input {
    width: 80%;
  }
  .button {
    position: absolute;
    margin-top: 10px;
    right: 0;
  }
}
</style>
